<!-- 告警业务查询 -->
<template>
	<div class="app-container">
		<yd-form class="yd-form-wraper" :options="formOptions" :model="searchFormData" :btns="formBtns"></yd-form>
		<YdTable
			:formData="searchFormData"
			:tableConfig="tableConfig"
			:tableData="tableData"
			@sizeChangeHandler="queryGrid"
			@currentChangeHandler="queryGrid"
			@sortChangeHandler="queryGrid"
		>
		</YdTable>
	</div>
</template>

<script setup name="AlarmServiceQuery" lang="tsx">
import { getYwgztBusinessAlarm, exportYwgztExcel } from '@/api/ops-workbench/historicalAlarm/alarmServiceQuery';
import { toDecimalFormate, parseTime } from '@/utils/common';
import { ref, reactive, onMounted, onActivated } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import useCurrentInstance from '@/utils/useCurrentInstance';

const router = useRouter();
const route = useRoute();
const { proxy } = useCurrentInstance();
const emit = defineEmits(['changeComponent']);

const formOptions = reactive<FormOptionType>([
	{
		type: 'select',
		label: '系统名称',
		prop: 'systemId',
		selectKey: 'value',
		api: {
			name: 'queryAppSystemOptions',
			params: { isStatus: 1 },
		},
		cascaders: [
			{
				cascadersParams: 'businessCodes',
				api: {
					name: 'queryBusinessOptions',
				},
			},
		],
	},
	{
		type: 'select',
		label: '业务名称',
		prop: 'businessCodes',
		selectKey: 'value',
		attrs: {
			multiple: true,
			indeterminate: false,
		},
	},
	{
		type: 'date-picker',
		label: '时间范围',
		prop: 'dateRange',
		span: 7,
		dateType: 'datetimerange',
		shortcutsKeys: ['last1h', 'today', 'lastDay'],
		defaulShortcutsKey: 'last1h',
	},
]);
const formBtns = reactive<BtnType[]>([
	{
		type: 'primary',
		text: '查询',
		handler: searchHandler,
	},
	{
		type: 'primary',
		text: '导出',
		handler: downloadHandler,
	},
]);
let searchFormData = reactive<anyObj>({
	businessCodes: route.query.businessCodes,
	systemId: route.query.systemId,
	dataCenterId: [''],
	dataCenter: [''],
});
const startTime = ref('');
const endTime = ref('');
const tableData = ref([]);
const tableConfig = reactive({
	columns: [
		{
			label: '业务名称',
			prop: 'businessName',
		},
		{
			label: '访问量',
			prop: 'visitCountTotal',
			sortable: true,
		},
		{
			label: '完整访问量',
			prop: 'completeVisitTotal',
			sortable: true,
		},
		{
			label: '平均办理时长',
			prop: 'avgDealTime',
			sortable: true,
			formatter(row: anyObj, val: ApiVal) {
				return toDecimalFormate(val, 'wm');
			},
		},
		{
			label: '失败访问量',
			prop: 'visitsFailTotal',
			renderXss: (row: anyObj, val: ApiVal) => {
				return <span style="color: #fe5578">{val}</span>;
			},
			sortable: true,
		},
		{
			label: '告警访问量',
			prop: 'alarmVisitCount',
			sortable: true,
		},
		{
			label: '成功率',
			prop: 'successRatio',
			sortable: true,
			formatter(row: anyObj, val: ApiVal) {
				//保留两位小数点
				return val + '%';
			},
		},
		{
			label: '健康度',
			prop: 'healthRatio',
			sortable: true,
			formatter(row: anyObj, val: ApiVal) {
				//保留两位小数点
				return val + '%';
			},
		},
		{
			label: '操作',
			prop: '',
			width: 100,
			operation: [
				{
					text: '明细',
					handler: (scope: anyObj) => {
						router.push({
							path: '/ops-workbench/historicalAlarmQuery/index',
							query: {
								tabFlag: 2,
								businessCodeList: [scope.row.businessCode],
								startTime: searchFormData.startTime,
								endTime: searchFormData.endTime,
								systemId: searchFormData.systemId,
								isAlarm: 1,
								alarmTypeIds:
									scope.row.alarmTypeId === 0
										? undefined
										: scope.row.alarmTypeId === null
										? undefined
										: scope.row.alarmTypeId.split(',').filter((value: any) => value != ''),
							},
						});
						emit('changeComponent', 2);
					},
				},
			],
		},
	],
	pagination: {
		pageNum: 1,
		pageSize: 10,
		total: 0,
	},
	loading: true,
	alarmType: true,
});

function searchHandler() {
	tableConfig.pagination.pageNum = 1;
	queryGrid();
}
//查询列表数据
function queryGrid() {
	tableConfig.loading = true;
	startTime.value = searchFormData.startTime;
	endTime.value = searchFormData.endTime;

	//点击自定义的时候将清理startTime和endTime
	if (startTime.value == null || endTime.value == null) {
		proxy.$modal.msgWarning('开始和结束时间不能为空');
		tableConfig.loading = false;
		return;
	}
	getYwgztBusinessAlarm(searchFormData).then((res: ApiResponse) => {
		tableData.value = [];
		tableConfig.pagination.total = 0;
		tableConfig.loading = false;
		if (res.code !== 0) {
			proxy.$modal.msgWarning(res.msg);
			return;
		}
		tableConfig.pagination.total = res.data.total;
		tableData.value = res.data.data;
	});
}

// 下载
function downloadHandler() {
	searchFormData.startTime = startTime.value;
	searchFormData.endTime = endTime.value;
	exportYwgztExcel(searchFormData).then((res: any) => {
		const currentDate = new Date();
		const currentDateTimeStr = parseTime(currentDate, '{y}{m}{d}{h}{i}{s}');
		const blob = res;
		const reader = new FileReader();
		reader.readAsDataURL(blob);
		reader.onload = (e) => {
			const a = document.createElement('a');
			a.download = '告警业务列表_' + currentDateTimeStr + `.xlsx`;
			a.href = e.target?.result as string;
			document.body.appendChild(a);
			a.click();
			document.body.removeChild(a);
		};
	});
}
onActivated(() => {
	searchFormData.systemId = route.query.systemId;
	queryGrid();
});
onMounted(() => {
	queryGrid();
});
</script>
<style lang="scss">
@import '/src/styles/ops-workbench/common.scss';
@import '/src/styles/ops-workbench/yd-table.scss';
</style>
<style scoped lang="scss"></style>
